<template>
	<view class="goods-detail-bottom-tabbar">
		<view class="tabbar-box">
			<view class="icon-box">
				<view class="home">
					<view class="box" @click="handleRouteSwitchTab(RouteSwitchTabEnum.home)">
						<image class="icon" :src="handleStaticResources('/static/images/icon/home.png')"></image>
						<view class="tit">首页</view>
					</view>
				</view>
				<view class="cart" @click="handleRouteSwitchTab(RouteSwitchTabEnum.cart)">
					<view class="box">
						<image class="icon" :src="handleStaticResources('/static/images/icon/cart.png')"></image>
						<view class="tit">购物车</view>
					</view>
					<view class="cartNum" v-if="cartStore.cartNum != 0">{{ cartStore.cartNum }}</view>
				</view>
			</view>

			<view class="tabbar-btn-box">
				<slot name="bottomTabbar">
					<view class="add-cart" @click="handleAddCart">
						<view class="tit">加入购物车</view>
					</view>
					<view class="buy-box" @click="handleBuyNow">
						<view class="buy">
							<view class="num">￥{{ props.price }}</view>
							<view class="tit">立即购买</view>
						</view>
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { handleStaticResources, handleRouteSwitchTab } from '@/core/utils';
	import { RouteSwitchTabEnum } from '@/core/enum';
	import type { UserCartType } from '@/core/models';
	import { useCartStore } from '@/core/store';

	const props = withDefaults(defineProps<{
		price : number,
	}>(), {
		price: 0,
	});

	const cartStore : UserCartType = useCartStore();

	const emit = defineEmits(['handleBuyNow', 'handleAddCart']);

	const handleBuyNow = () => {
		emit('handleBuyNow')
	}
	const handleAddCart = () => {
		emit('handleAddCart')
	}
</script>

<style lang="scss" scoped>
	@import './goods-detail-bottom-tabbar.scss';
</style>